<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px">
      <div style="text-align:right" v-if="disabledFlag">
        <el-button @click="goback()" size="mini" type="primary" style="margin-right:50px">返回</el-button>
      </div>

      <div style="width:500px;">
        <el-form-item label="协议名称" prop="protocolName">
          <el-input v-model="ruleForm.protocolName" :disabled="disabledFlag" type="textarea" maxlength="30" show-word-limit placeholder="请输入协议名称" />
        </el-form-item>
        <el-form-item label="协议类型" prop="protocolType">
          <el-select v-model="ruleForm.protocolType" :disabled="disabledFlag || !!ruleForm.protocolNum" style="width:100%">
            <el-option v-for="item in protocolTypeList" :key="item.protocolTypeCode" :label="item.protocolTypeName" :value="item.protocolTypeCode" />
          </el-select>
        </el-form-item>
      </div>

      <div style="width: 90%">
        <el-form-item label="协议内容" prop="protocolContent" v-if="!disabledFlag">
          <VueUeditorWrap editor-id="protocol-content" v-model="ruleForm.protocolContent" :config="myConfig" :destroy="true" />
        </el-form-item>

        <el-form-item label="协议内容" prop="protocolContent" v-if="disabledFlag">
          <div class="agreement" v-html="ruleForm.protocolContent"></div>
        </el-form-item>
      </div>

      <el-form-item label="发布状态" prop="protocolState">
        <el-radio-group v-model="ruleForm.protocolState" :disabled="disabledFlag">
          <el-radio-button label="0">未发布</el-radio-button>
          <el-radio-button label="1">已发布</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-show="!disabledFlag" style="width:100%;text-align:center">
				<el-button @click="goback()">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')"
					:loading="submitLoading">保存
				</el-button>
			</el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getAgreementList, getProtocolType, addAgreement, updateAgreement } from '@/api/agreementManage';
import VueUeditorWrap from "vue-ueditor-wrap";

export default {
  components: {
    VueUeditorWrap
  },
  data() {
    return {
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 240,
        // 初始容器宽度
        initialFrameWidth: "100%",
        serverUrl: `${process.env.VUE_APP_BASE_API}/api/file-service/v1/file/uploadFile`,
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: process.env.NODE_ENV == 'production' ? "../../ui/static/UEditor/" : "../../static/UEditor/",
      },
      disabledFlag: false,
      protocolTypeList: [],

      ruleForm: {
        protocolName: "",
        protocolType: "",
        protocolContent: "",
        protocolState: 0
      },
      rules: {
        protocolName: [
          { required: true, message: "请输入协议名称", trigger: "blur" }
        ],
        protocolType: [
          { required: true, message: "请选择协议类型", trigger: "blur" }
        ],
        protocolContent: [
          { required: true, message: "请输入协议内容", trigger: "change" }
        ],
        protocolState: [
          { required: true, message: "请选择发布状态", trigger: "change" }
        ]
      },

      submitLoading: false
    }
  },

  created() {
    if(this.$route.params.type == 'detail') {
      this.disabledFlag = true;
    }
    // 获取协议类型
    getProtocolType().then(res => {
      if (res.code == 1) {
        this.protocolTypeList = res.records;

        if(this.$route.params.protocolNum) {
          this.getDetail(this.$route.params.protocolNum);
        }
      }
    })
  },

  methods: {
    getDetail(protocolNum) {
      getAgreementList({
        condition: {
          protocolNum
        }
      }).then(res => {
        if (res.code == 1) {
          this.ruleForm = res.records[0];
        }
      })
    },

    goback() {
      this.$router.go(-1)
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitLoading = true;

          if(this.$route.params.type == 'edit') {
            updateAgreement({
              ...this.ruleForm,
              protocolNum: this.$route.params.protocolNum
            }).then((res) => {
              if (res.code == 1) {
                this.$message.success("操作成功");
                this.goback();
              }
            }).finally(() => {
              this.submitLoading = false;
            })
          } else {
            addAgreement(this.ruleForm).then((res) => {
              if (res.code == 1) {
                this.$message.success("操作成功");
                this.goback();
              }
            }).finally(() => {
              this.submitLoading = false;
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.agreement {
  width: 80%;
  height: 200px;
  overflow: auto;
  padding: 20px;
  background: #EBEEF5;
  border-radius: 5px;
}
</style>